<template>
	<view>
		<view class='title ellip' :class="[isHasSelFlag ? '' : 'noSel',specFlag ? 'spec' : '']"  @tap='togglePicker'>
		  {{province}}{{city}}{{country}}
		</view>
		<view class='mask' v-if="showAreaFlag" @tap='closeModal'></view>
		<view class='city-body areaViewTxt' :class="{'active': showAreaFlag}">
			  <view class='cancel-click'>
				<text class="cancelBtn" @tap='closeModal'>取消</text>
				<text class="resetBtn" @tap='resetFun' v-if="needRestFlag">重置</text>
				<text class="sureBtn" @tap='done'>确定</text>
			  </view>
			  <view class="otherPart hasFlex" v-if="currPage == 'zxsList'">
			    <view class="iconfont icon-dingwei"></view>
			    <template v-if="permissionNum == 1">
			  	  <template v-if="locProv == ''">
			  		  <loading :cirSize="14" style="margin: 5rpx 0 0 20rpx;"></loading>
			  	  </template>
			  	  <template v-else>
						<view class="currLoc">{{locProv}}{{locCity}}</view>
						<view class="authLoc" @tap="selLocArea">选择</view>
						<view class="againGetLoc" @tap="goAuthLoc">重新获取</view>
			  	  </template>
			    </template>
			    <template v-else>
			  	  <view class="tips">开启授权,获得定位城市</view>
			  	  <view class="authLoc" @tap="goAuthLoc">授权</view>
			    </template>
			  </view>
			  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px;" :value="value" @change="bindChange">
				<picker-view-column style="border-right: 1px solid rgb(242,242,242)">
					<view class="areaViewTxt" v-for="(item,index) in provinces" :key="index" style="line-height: 50px">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column style="border-right: 1px solid rgb(242,242,242)">
					<view class="areaViewTxt" v-for="(item,index) in citys" :key="index" style="line-height: 50px">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column style="border-right: 1px solid rgb(242,242,242)" v-if="isNeedCountryFlag">
					<view class="areaViewTxt" v-for="(item,index) in countrys" :key="index" style="line-height: 50px">{{item.label}}</view>
				</picker-view-column>
			  </picker-view>
		</view>
	</view>
</template>

<script>
	import area from "../../common/areas.js";
	export default {
		props:{
			province : {
				type : String
			},
			city : {
				type : String
			},
			country:{
				type:String
			},
			isNeedCountryFlag:{
				type:Boolean,
				default:true
			},
			needRestFlag:{
				type:Boolean,
				default:false
			},
			isHasSelFlag : {
				type : Boolean
			},
			specFlag : {
				type : Boolean
			},
			permissionNum:Number,
			showAreaFlag:Boolean,
			locProv:String,
			locCity:String,
			currPage:{
				type:String,
				default:'zxsList'//zxsList selGrid(服务师入驻综治选择网格)
			}
		},
		mounted : function(){
			if(this.currPage == 'zxsList'){
				var tmpObj = { value:'',label:'全国',children:[{"value": "", "label": "不限城市","children":[{"value":"",label:"不限地区"}]}] }
				area.areaData.unshift(tmpObj)
			}
			let provData = area.areaData;
			this.provinces = area.areaData;
			this.citys = area.areaData[0]['children'];
			this.countrys = area.areaData[0]['children'][0]['children'];
		},
		data() {
			return {
				provinces: [],
				citys: [],
				countrys:[],
				value: [0, 0, 0],
				isShow: false
			}
		},
		methods: {
			//地理位置授权
			goAuthLoc(){
				this.$emit('goAuthLoc');
			},
			//选择定位地址
			selLocArea(){
				this.$emit('selLocArea');
			},
			bindChange : function(e){
				const val = e.detail.value; 
				this.value = val;
				this.citys = this.provinces[val[0]]['children'].length > 0 ? this.provinces[val[0]]['children'] : [];
				this.countrys = this.citys[val[1]]['children'].length > 0 ? this.citys[val[1]]['children'] : [];
			},
			closeModal() {
				// this.isShow = false;
				this.$emit('toggleAreaPicker',false);
			},
			togglePicker() {
				this.$emit('toggleAreaPicker',true);
			},
			resetFun(){
				this.isShow = false;
				this.$emit('resetDistrict');
			},
			done(){
				const val = this.value;
				this.isShow = false;
				if(this.isNeedCountryFlag){
					this.$emit('selected',{
						isHasSelFlag : true,
						province: this.provinces[val[0]].label,
					    city: this.provinces[val[0]]['children'].length > 0 ? this.provinces[val[0]]['children'][val[1]].label : '',
						country : this.citys[val[1]]['children'].length > 0 ? this.citys[val[1]]['children'][val[2]].label : '',
						countyCode:this.citys[val[1]]['children'].length > 0 ? this.citys[val[1]]['children'][val[2]].value : ''
					})
				}else{
					this.$emit('selected',{
						isHasSelFlag : true,
						province: this.provinces[val[0]].label,
					    city: this.provinces[val[0]]['children'].length > 0 ? this.provinces[val[0]]['children'][val[1]].label : ''
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.otherPart{
		height: 90rpx;
		line-height: 90rpx;
		background: #fff;
		font-size: 28rpx;
		color: $pss-text-color3;
		position: relative;
		z-index: 10;
		text-align: left;
		padding:0 30rpx;
		box-shadow: 0 2rpx 5rpx rgba(0,0,0,.05);
		.icon-dingwei{
			font-size: 26rpx;
		}
		.tips{
			margin: 0 40rpx 0 15rpx;
		}
		.authLoc{
			color: $pss-color-primary_1;
		}
		.againGetLoc{
			position: absolute;
			right: 40rpx;
			top: 0;
			padding-left: 30rpx;
			color: $pss-text-colora;
		}
		.currLoc{
			margin:0 15rpx;
		}
	}
	.areaViewTxt{
	  font-size: 28rpx;
	  text-align: center;
	}
	.title{
	  width: 100%;
	  text-align: left;
	  float: left;
	  color: #121212;
	  font-size: 26rpx;
	}
	.title.spec{
		text-align: right;
		padding-left: 0;
	}
	.title.noSel{
		color: #888;
	}
	.cancel-click{
	  display: flex;
	  height: 80rpx;
	  line-height: 80rpx;
	  justify-content: space-between;
	  padding: 10rpx 30rpx;
	 /* border-top: 1px solid #D8D8D8; */
	  border-bottom: 1px solid #eee;
	  font-size: 30rpx;
	}
	.cancel-click .cancelBtn{
	 /* padding: 0 60rpx; */
	 padding-right: 60rpx;
	  color: #aeaeae;
	}
	.cancel-click .resetBtn{
		padding:0 60rpx;
		color: #8e8986;
	}
	.cancel-click .sureBtn{
	  /* padding: 0 60rpx; */
	  padding-left: 60rpx;
	  color: $pss-color-blueDeep;
	}
	.city-body{
	  width: 100%;
	  position: fixed;
	  left: 0;
	  bottom:0;
	  background-color: #fff;
	  //z-index: 999;
	  transition: ease .3s;
	  transform: translateY(100%);
	  z-index: 100;
	}
	.city-body.active{
	  transform: translateY(0);
	}
	.mask{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 0, 0, .5);
	  z-index: 100;
	}
</style>
